<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>声破天 - 畅享无限音乐</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="assets/css/landing.css">
</head>
<body>
    <!-- 添加额外的固定元素包装以尝试解决滚动问题 -->
    <div id="content-wrapper" style="width: 100%; height: auto; overflow-x: hidden; overflow-y: auto; position: relative;">
        <div class="landing-container clearfix">
            <!-- 顶部导航 - 匹配图中导航 -->
            <header class="landing-header">
                <nav class="landing-nav">
                    <div class="logo">
                        <a href="index.html">
                            <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="25" cy="25" r="20" fill="#1DB954" />
                                <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2" fill="none" />
                                <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2" fill="none" />
                                <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2" fill="none" />
                                <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="white">声破天</text>
                            </svg>
                        </a>
                    </div>
                    <div class="nav-links">
                        <a href="premium.html">Premium</a>
                        <a href="help.html">帮助</a>
                        <a href="about.html">关于我们</a>
                        <a href="index.html">进入主页</a>
                    </div>
                    <div class="auth-nav">
                        <a href="login.html" class="nav-login">登录</a>
                        <a href="register.html" class="nav-register">注册</a>
                    </div>
                </nav>
            </header>

            <section class="hero-section">
                <!-- 添加更多音符飘浮动画元素 -->
                <div class="floating-notes">
                    <!-- 原有的音符 -->
                    <i class="fas fa-music note" style="top: 20%; left: 10%; animation-duration: 15s;"></i>
                    <i class="fas fa-music note" style="top: 30%; left: 20%; animation-duration: 18s; animation-delay: 2s;"></i>
                    <i class="fas fa-music note" style="top: 15%; left: 30%; animation-duration: 20s; animation-delay: 5s;"></i>
                    <i class="fas fa-music note" style="top: 40%; left: 70%; animation-duration: 17s; animation-delay: 1s;"></i>
                    <i class="fas fa-music note" style="top: 25%; left: 80%; animation-duration: 22s; animation-delay: 3s;"></i>
                    <i class="fas fa-music note" style="top: 10%; left: 60%; animation-duration: 19s; animation-delay: 7s;"></i>
                    <i class="fas fa-compact-disc note" style="top: 35%; left: 15%; animation-duration: 21s; animation-delay: 4s;"></i>
                    <i class="fas fa-headphones note" style="top: 25%; left: 85%; animation-duration: 16s; animation-delay: 6s;"></i>
                    
                    <!-- 添加更多音符和音乐图标 -->
                    <i class="fas fa-music note" style="top: 5%; left: 5%; animation-duration: 23s; animation-delay: 1.5s;"></i>
                    <i class="fas fa-music note" style="top: 15%; left: 45%; animation-duration: 19s; animation-delay: 0.5s;"></i>
                    <i class="fas fa-music note" style="top: 45%; left: 25%; animation-duration: 17s; animation-delay: 3.5s;"></i>
                    <i class="fas fa-music note" style="top: 35%; left: 75%; animation-duration: 20s; animation-delay: 6.5s;"></i>
                    <i class="fas fa-music note" style="top: 5%; left: 90%; animation-duration: 18s; animation-delay: 4.5s;"></i>
                    <i class="fas fa-music note" style="top: 50%; left: 45%; animation-duration: 22s; animation-delay: 2.5s;"></i>
                    
                    <i class="fas fa-compact-disc note" style="top: 60%; left: 10%; animation-duration: 25s; animation-delay: 1s;"></i>
                    <i class="fas fa-compact-disc note" style="top: 20%; left: 50%; animation-duration: 24s; animation-delay: 5s;"></i>
                    <i class="fas fa-headphones note" style="top: 40%; left: 60%; animation-duration: 22s; animation-delay: 3s;"></i>
                    <i class="fas fa-volume-up note" style="top: 30%; left: 40%; animation-duration: 21s; animation-delay: 7s;"></i>
                    <i class="fas fa-microphone note" style="top: 55%; left: 30%; animation-duration: 23s; animation-delay: 4s;"></i>
                    <i class="fas fa-guitar note" style="top: 45%; left: 85%; animation-duration: 26s; animation-delay: 2s;"></i>
                    <i class="fas fa-drum note" style="top: 10%; left: 70%; animation-duration: 24s; animation-delay: 5.5s;"></i>
                    <i class="fas fa-record-vinyl note" style="top: 50%; left: 5%; animation-duration: 20s; animation-delay: 3.5s;"></i>
                    
                    <!-- 添加音符符号 -->
                    <div class="music-symbol note" style="top: 25%; left: 55%; animation-duration: 19s; animation-delay: 2s;">♪</div>
                    <div class="music-symbol note" style="top: 15%; left: 75%; animation-duration: 21s; animation-delay: 4s;">♫</div>
                    <div class="music-symbol note" style="top: 40%; left: 35%; animation-duration: 18s; animation-delay: 6s;">♬</div>
                    <div class="music-symbol note" style="top: 55%; left: 65%; animation-duration: 23s; animation-delay: 1s;">♩</div>
                    <div class="music-symbol note" style="top: 5%; left: 40%; animation-duration: 22s; animation-delay: 3s;">♪</div>
                    <div class="music-symbol note" style="top: 35%; left: 90%; animation-duration: 20s; animation-delay: 5s;">♫</div>
                </div>
                
                <!-- 内容包装区域 - 确保内容在波浪效果之上 -->
                <div class="hero-content" style="position: relative; z-index: 15;">
                    <h1 class="hero-title">开始您的音乐之旅</h1>
                    <p class="hero-subtitle">加入数百万用户的行列，探索无限音乐世界，免费注册，立即开始聆听。</p>
                    <div class="cta-buttons">
                        <a href="register.html" class="btn-cta-primary">免费注册</a>
                        <a href="premium.html" class="btn-cta-secondary">了解Premium</a>
                    </div>
                </div>
                
                <!-- 波浪效果 -->
                <div class="hero-wave" style="z-index: 3; pointer-events: none;"></div>
            </section>

            <!-- 右侧锚点导航菜单 -->
            <div class="page-navigator">
                <a href="#hero" class="active">
                    <span class="tooltip">顶部</span>
                </a>
                <a href="#video">
                    <span class="tooltip">视频展示</span>
                </a>
                <a href="#features">
                    <span class="tooltip">功能特点</span>
                </a>
                <a href="#premium">
                    <span class="tooltip">会员计划</span>
                </a>
                <a href="#testimonials">
                    <span class="tooltip">用户评价</span>
                </a>
                <a href="#faq">
                    <span class="tooltip">常见问题</span>
                </a>
                <a href="#cta">
                    <span class="tooltip">立即开始</span>
                </a>
            </div>

            <!-- 回到顶部按钮 -->
            <div class="back-to-top">
                <i class="fas fa-chevron-up"></i>
            </div>

            <!-- 音乐视频展示区域 - 新增 -->
            <section class="video-showcase-section" id="video">
                <div class="container">
                    <h2 class="section-title">感受音乐的魅力</h2>
                    <p class="video-section-description">直观体验声破天为您带来的高品质音乐享受</p>
                    <div class="video-container">
                        <video controls autoplay poster="assets/images/video-poster.jpg" width="100%" height="100%" preload="auto">
                            <source src="./assets/music/音乐视频.mp4" type="video/mp4">
                            您的浏览器不支持HTML5视频，请升级浏览器或使用其他浏览器观看。
                        </video>
                    </div>
                    <div class="video-info">
                        <p style="color: #333; font-size: 1.2rem; font-weight: 500; line-height: 1.6; margin: 25px 0; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; border: 1px solid #eee; padding: 15px; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">通过声破天，发现更多精彩音乐视频和现场表演，感受音乐的无限魅力</p>
                    </div>
                </div>
            </section>

            <!-- 功能展示区域 -->
            <section class="features-section" id="features">
                <h2 class="section-title">为什么选择声破天？</h2>
                <div class="features-grid">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-music"></i>
                        </div>
                        <h3 class="feature-title">海量音乐资源</h3>
                        <p class="feature-description">超过7000万首歌曲，覆盖全球各类音乐流派，从流行到古典，从爵士到摇滚，总有适合你的音乐。</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-podcast"></i>
                        </div>
                        <h3 class="feature-title">丰富的播客内容</h3>
                        <p class="feature-description">精选全球热门播客节目，涵盖新闻、教育、娱乐等多种类型，随时随地获取最新资讯。</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-magic"></i>
                        </div>
                        <h3 class="feature-title">智能推荐系统</h3>
                        <p class="feature-description">基于你的听歌习惯和口味偏好，智能推荐你可能喜欢的音乐，帮你发现更多好听的歌曲。</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-download"></i>
                        </div>
                        <h3 class="feature-title">离线收听</h3>
                        <p class="feature-description">Premium用户可以下载音乐到本地，无网络环境也能享受高品质音乐，节省流量，随时畅听。</p>
                    </div>
                </div>
            </section>

            <!-- Premium计划区域 -->
            <section class="premium-section" id="premium">
                <h2 class="section-title">选择适合你的计划</h2>
                <div class="pricing-grid">
                    <div class="pricing-card">
                        <h3 class="pricing-title">个人版</h3>
                        <p class="pricing-description">单人账户，享受全部Premium特权</p>
                        <div class="pricing-price">¥18</div>
                        <div class="pricing-period">每月</div>
                        <ul class="pricing-features">
                            <li>无广告打扰</li>
                            <li>高音质播放（最高320kbps）</li>
                            <li>离线下载</li>
                            <li>无限跳过歌曲</li>
                        </ul>
                        <button class="btn-pricing">开始使用</button>
                    </div>
                    <div class="pricing-card premium-card">
                        <div class="popular-tag">最受欢迎</div>
                        <h3 class="pricing-title">情侣版</h3>
                        <p class="pricing-description">两个Premium账号，为你和另一半</p>
                        <div class="pricing-price">¥25</div>
                        <div class="pricing-period">每月</div>
                        <ul class="pricing-features">
                            <li>两个独立Premium账号</li>
                            <li>无广告打扰</li>
                            <li>高音质播放（最高320kbps）</li>
                            <li>可分别创建和享受个性化推荐</li>
                        </ul>
                        <button class="btn-pricing">开始使用</button>
                    </div>
                    <div class="pricing-card">
                        <h3 class="pricing-title">家庭版</h3>
                        <p class="pricing-description">最多6个账号，全家共享音乐</p>
                        <div class="pricing-price">¥35</div>
                        <div class="pricing-period">每月</div>
                        <ul class="pricing-features">
                            <li>最多6个Premium账号</li>
                            <li>家长内容控制</li>
                            <li>共享播放列表功能</li>
                            <li>所有Premium功能一应俱全</li>
                        </ul>
                        <button class="btn-pricing">开始使用</button>
                    </div>
                </div>
            </section>

            <!-- 用户评价区域 -->
            <section class="testimonials-section" id="testimonials">
                <h2 class="section-title">用户的声音</h2>
                <div class="testimonials-grid">
                    <div class="testimonial-card">
                        <div class="testimonial-stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <p class="testimonial-text">"声破天的推荐算法太精准了，每天都能发现新的好歌，界面简洁，使用体验非常棒！"</p>
                        <div class="testimonial-author">
                            <div class="author-avatar">
                                <img src="./assets//images/covers/cover1.jpg" alt="用户头像">
                            </div>
                            <div class="author-info">
                                <h4 class="author-name">张小明</h4>
                                <p class="author-role">Premium用户 · 2年</p>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <p class="testimonial-text">"家庭套餐真的很划算，我和孩子们各自有自己的账号和推荐，歌单不会互相干扰，非常满意。"</p>
                        <div class="testimonial-author">
                            <div class="author-avatar">
                                <img src="./assets//images/covers/cover2.jpg" alt="用户头像">
                            </div>
                            <div class="author-info">
                                <h4 class="author-name">李女士</h4>
                                <p class="author-role">家庭版用户 · 1年</p>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                        <p class="testimonial-text">"离线下载功能太实用了，我经常坐地铁，没有网络也能听高质量音乐，完全不用担心流量问题。"</p>
                        <div class="testimonial-author">
                            <div class="author-avatar">
                                <img src="./assets//images/covers/cover3.jpg" alt="用户头像">
                            </div>
                            <div class="author-info">
                                <h4 class="author-name">王大卫</h4>
                                <p class="author-role">Premium用户 · 8个月</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 常见问题区域 -->
            <section class="faq-section" id="faq">
                <h2 class="section-title">常见问题</h2>
                <div class="faq-container">
                    <div class="faq-item">
                        <div class="faq-question">
                            声破天是什么？ <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            声破天是一个音乐流媒体平台，提供数百万首歌曲、播客和故事。您可以在各种设备上随时随地收听您喜爱的音乐，发现新的艺术家和播放列表，享受个性化的音乐推荐。
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            如何创建账号？ <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            您可以通过声破天网站或应用程序轻松创建账号。点击"注册"按钮，填写必要信息（电子邮件地址、密码、用户名等），然后按照指示完成账号创建过程。您也可以使用微信、QQ或其他社交媒体账号直接登录。
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            免费版和Premium版有什么区别？ <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            免费版用户可以欣赏所有音乐内容，但会有广告，音质限制，无法下载音乐离线收听，且在移动设备上不能进行无限跳过歌曲。Premium用户可以享受无广告服务、更高音质、音乐下载功能、无限跳过歌曲等特权，同时还有专属活动和优惠。
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            家庭计划如何运作？ <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            家庭计划允许最多6个居住在同一地址的账号享受Premium服务，每个账号都有自己的独立体验。主要账号持有人可以添加家庭成员，并管理支付和设置。家庭计划比单独订阅多个账号更经济实惠。
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            如何取消订阅？ <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            您可以随时取消订阅。登录您的账号，进入"账号设置">"订阅"，选择"取消订阅"选项。您仍可以使用Premium服务直到当前计费周期结束。取消后，您的账号将自动转为免费版，所有保存的音乐和播放列表都会保留。
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            声破天支持哪些设备？ <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            声破天几乎支持所有主流设备，包括iOS和Android智能手机和平板电脑，Windows和Mac电脑，智能电视，智能音箱（如小爱同学、天猫精灵等），游戏机和智能手表等。您可以在任何设备上无缝切换您的音乐体验。
                        </div>
                    </div>
                </div>
            </section>

            <!-- 最终呼吁区域 -->
            <section class="final-cta-section" id="cta">
                <div class="final-cta-content">
                    <h2 class="final-cta-title">开始您的音乐之旅</h2>
                    <p class="final-cta-text">加入数百万用户的行列，探索无限音乐世界。免费注册，立即开始聆听。</p>
                    <div class="final-cta-buttons">
                        <a href="register.html" class="btn-final-cta">免费注册</a>
                        <a href="premium.html" class="btn-final-cta" style="background-color: transparent; border: 2px solid white;">了解Premium</a>
                    </div>
                </div>
                <div class="final-cta-notes">
                    <i class="fas fa-music final-cta-note" style="top: 20%; left: 10%; animation-duration: 15s;"></i>
                    <i class="fas fa-music final-cta-note" style="top: 30%; left: 20%; animation-duration: 18s; animation-delay: 2s;"></i>
                    <i class="fas fa-music final-cta-note" style="top: 15%; left: 30%; animation-duration: 20s; animation-delay: 5s;"></i>
                    <i class="fas fa-music final-cta-note" style="top: 40%; left: 70%; animation-duration: 17s; animation-delay: 1s;"></i>
                    <i class="fas fa-music final-cta-note" style="top: 25%; left: 80%; animation-duration: 22s; animation-delay: 3s;"></i>
                    <i class="fas fa-music final-cta-note" style="top: 10%; left: 60%; animation-duration: 19s; animation-delay: 7s;"></i>
                    <i class="fas fa-compact-disc final-cta-note" style="top: 35%; left: 15%; animation-duration: 21s; animation-delay: 4s;"></i>
                    <i class="fas fa-headphones final-cta-note" style="top: 25%; left: 85%; animation-duration: 16s; animation-delay: 6s;"></i>
                </div>
            </section>

            <!-- 页脚 -->
            <footer class="landing-footer">
                <div class="footer-content">
                    <div class="footer-column">
                        <div class="footer-logo">
                            <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" width="150">
                                <circle cx="25" cy="25" r="20" fill="#1DB954" />
                                <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2" fill="none" />
                                <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2" fill="none" />
                                <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2" fill="none" />
                                <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="white">声破天</text>
                            </svg>
                        </div>
                    </div>
                    <div class="footer-column">
                        <h4>公司</h4>
                        <ul>
                            <li><a href="about.html">关于我们</a></li>
                            <li><a href="jobs.html">工作机会</a></li>
                            <li><a href="press.html">新闻中心</a></li>
                            <li><a href="investors.html">投资者关系</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>社区</h4>
                        <ul>
                            <li><a href="artists.html">艺术家</a></li>
                            <li><a href="developers.html">开发者</a></li>
                            <li><a href="advertising.html">广告</a></li>
                            <li><a href="vendors.html">供应商</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>快速链接</h4>
                        <ul>
                            <li><a href="help.html">帮助中心</a></li>
                            <li><a href="index.html">进入主页</a></li>
                            <li><a href="premium.html">升级 Premium</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>关注我们</h4>
                        <div class="social-icons">
                            <a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
                            <a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
                            <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
                            <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
                        </div>
                    </div>
                </div>
                <div class="footer-bottom">
                    <div class="footer-links">
                        <a href="legal.html">法律信息</a>
                        <a href="privacy.html">隐私中心</a>
                        <a href="privacy-policy.html">隐私政策</a>
                        <a href="cookies.html">Cookie 设置</a>
                        <a href="about-ads.html">关于广告</a>
                    </div>
                    <div class="footer-info">
                        <p>© 2025 把你当日本人有限公司</p>
                        <p>中国，湖北省武汉市</p>
                    </div>
                </div>
            </footer>
        </div>
    </div>

    <script>
        // FAQ交互逻辑
        document.addEventListener('DOMContentLoaded', function() {
            // 视频处理
            const videoElement = document.querySelector('.video-container video');
            if (videoElement) {
                // 尝试使用绝对路径
                const videoSources = videoElement.querySelectorAll('source');
                if (videoSources.length > 0) {
                    // 添加绝对路径版本
                    const absoluteSource = document.createElement('source');
                    absoluteSource.src = 'D:/spotify_web-master/音乐视频.mp4';
                    absoluteSource.type = 'video/mp4';
                    videoElement.insertBefore(absoluteSource, videoSources[0]);
                }
                
                // 添加视频加载事件
                videoElement.addEventListener('loadeddata', function() {
                    console.log('视频已加载完成');
                });
                
                // 添加视频错误处理
                videoElement.addEventListener('error', function(e) {
                    console.error('视频加载错误:', e);
                    const container = this.closest('.video-container');
                    if (container) {
                        // 显示错误信息和替代内容
                        const errorMsg = document.createElement('div');
                        errorMsg.className = 'video-error-message';
                        errorMsg.innerHTML = `
                            <div class="error-icon"><i class="fas fa-exclamation-circle"></i></div>
                            <h3>视频加载失败</h3>
                            <p>抱歉，视频无法加载。请稍后再试或查看其他精彩内容。</p>
                        `;
                        container.appendChild(errorMsg);
                    }
                });
            }
            
            const faqItems = document.querySelectorAll('.faq-item');
            
            faqItems.forEach(item => {
                const question = item.querySelector('.faq-question');
                
                question.addEventListener('click', () => {
                    // 关闭其他打开的FAQ
                    faqItems.forEach(otherItem => {
                        if (otherItem !== item && otherItem.classList.contains('active')) {
                            otherItem.classList.remove('active');
                        }
                    });
                    
                    // 切换当前FAQ的状态
                    item.classList.toggle('active');
                });
            });
            
            // 添加计划按钮点击事件
            const pricingButtons = document.querySelectorAll('.btn-pricing');
            pricingButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 获取计划名称
                    const planTitle = this.closest('.pricing-card').querySelector('.pricing-title').textContent;
                    // 重定向到Premium页面
                    window.location.href = 'premium.html?plan=' + encodeURIComponent(planTitle);
                });
            });

            // 确保body和html可以滚动
            document.documentElement.style.height = "auto";
            document.documentElement.style.overflowY = "auto";
            document.body.style.height = "auto";
            document.body.style.overflowY = "auto";
            
            // 为内容包装器添加滚动能力
            document.getElementById('content-wrapper').style.height = 'auto';
            document.getElementById('content-wrapper').style.overflowY = 'auto';
            
            // 防止可能的滚动阻塞
            document.querySelectorAll('.hero-section, .features-section, .premium-section, .testimonials-section, .faq-section, .final-cta-section, .video-showcase-section').forEach(section => {
                section.style.overflow = 'visible';
                section.style.height = 'auto';
            });
            
            // 添加调试日志
            console.log("页面加载完成，检查滚动功能");
            const pageHeight = Math.max(
                document.body.scrollHeight,
                document.body.offsetHeight,
                document.documentElement.clientHeight,
                document.documentElement.scrollHeight,
                document.documentElement.offsetHeight
            );
            console.log("页面总高度: " + pageHeight + "px");
            console.log("视口高度: " + window.innerHeight + "px");

            // 进入主页特效
            const playerLinks = document.querySelectorAll('a[href="index.html"], .btn-enter-player');
            
            playerLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 创建logo特效容器
                    const effectContainer = document.createElement('div');
                    effectContainer.style.position = 'fixed';
                    effectContainer.style.top = '0';
                    effectContainer.style.left = '0';
                    effectContainer.style.width = '100%';
                    effectContainer.style.height = '100%';
                    effectContainer.style.backgroundColor = 'rgba(29, 185, 84, 0.3)';
                    effectContainer.style.zIndex = '9999';
                    effectContainer.style.display = 'flex';
                    effectContainer.style.justifyContent = 'center';
                    effectContainer.style.alignItems = 'center';
                    effectContainer.style.transition = 'all 0.5s ease-in-out';
                    document.body.appendChild(effectContainer);
                    
                    // 创建logo
                    const logo = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                    logo.setAttribute('viewBox', '0 0 100 100');
                    logo.setAttribute('width', '150');
                    logo.setAttribute('height', '150');
                    logo.style.transition = 'all 0.5s ease-in-out';
                    
                    // 添加圆形背景
                    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
                    circle.setAttribute('cx', '50');
                    circle.setAttribute('cy', '50');
                    circle.setAttribute('r', '40');
                    circle.setAttribute('fill', '#1DB954');
                    logo.appendChild(circle);
                    
                    // 添加三条声波线
                    const wave1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
                    wave1.setAttribute('d', 'M30 55C30 55 42 45 50 45C58 45 70 55 70 55');
                    wave1.setAttribute('stroke', 'black');
                    wave1.setAttribute('stroke-width', '3');
                    wave1.setAttribute('fill', 'none');
                    wave1.setAttribute('class', 'wave wave1');
                    
                    const wave2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
                    wave2.setAttribute('d', 'M25 45C25 45 40 30 50 30C60 30 75 45 75 45');
                    wave2.setAttribute('stroke', 'black');
                    wave2.setAttribute('stroke-width', '3');
                    wave2.setAttribute('fill', 'none');
                    wave2.setAttribute('class', 'wave wave2');
                    
                    const wave3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
                    wave3.setAttribute('d', 'M20 35C20 35 35 15 50 15C65 15 80 35 80 35');
                    wave3.setAttribute('stroke', 'black');
                    wave3.setAttribute('stroke-width', '3');
                    wave3.setAttribute('fill', 'none');
                    wave3.setAttribute('class', 'wave wave3');
                    
                    logo.appendChild(wave1);
                    logo.appendChild(wave2);
                    logo.appendChild(wave3);
                    
                    effectContainer.appendChild(logo);
                    
                    // 添加动画样式
                    const style = document.createElement('style');
                    style.textContent = `
                        @keyframes waveAnimation {
                            0% { transform: scaleY(0); opacity: 0; }
                            50% { transform: scaleY(1.2); opacity: 1; }
                            100% { transform: scaleY(1); opacity: 1; }
                        }
                        
                        .wave {
                            transform-origin: center;
                            animation: waveAnimation 0.5s ease-out forwards;
                        }
                        
                        .wave1 {
                            animation-delay: 0s;
                        }
                        
                        .wave2 {
                            animation-delay: 0.1s;
                        }
                        
                        .wave3 {
                            animation-delay: 0.2s;
                        }
                    `;
                    document.head.appendChild(style);
                    
                    // 动画完成后跳转
                    setTimeout(() => {
                        circle.style.transform = 'scale(10)';
                        logo.style.transform = 'scale(0.5)';
                        effectContainer.style.backgroundColor = 'rgba(29, 185, 84, 0.9)';
                        
                        setTimeout(() => {
                            // 使用相对路径进行跳转
                            window.location.href = 'index.html';
                        }, 500);
                    }, 800);
                });
            });

            // 添加滚动动画
            const animateOnScroll = function() {
                const elements = document.querySelectorAll('.feature-item, .testimonial-card, .media-logo, .section-title');
                
                elements.forEach(element => {
                    const elementPosition = element.getBoundingClientRect().top;
                    const screenPosition = window.innerHeight / 1.2;
                    
                    if (elementPosition < screenPosition) {
                        element.style.visibility = 'visible';
                        element.style.animation = element.dataset.animation || 'fadeInUp 0.8s forwards';
                    }
                });
            };
            
            // 初始隐藏需要动画的元素
            const elementsToAnimate = document.querySelectorAll('.feature-item, .testimonial-card, .media-logo');
            elementsToAnimate.forEach(element => {
                element.style.visibility = 'hidden';
            });
            
            // 添加滚动监听器
            window.addEventListener('scroll', animateOnScroll);
            
            // 初始检查
            animateOnScroll();
            
            // 功能图标悬停效果增强
            const featureIcons = document.querySelectorAll('.feature-icon');
            featureIcons.forEach(icon => {
                icon.addEventListener('mouseover', function() {
                    this.style.transform = 'scale(1.2) rotate(10deg)';
                    this.style.color = '#1ED760';
                });
                
                icon.addEventListener('mouseout', function() {
                    this.style.transform = '';
                    this.style.color = '';
                });
            });
        });
        
        // 添加一个滚动监听，用于调试
        window.addEventListener('scroll', function() {
            console.log('页面滚动位置: ' + window.scrollY + 'px');
        });

        document.addEventListener('DOMContentLoaded', function() {
            // 添加锚点导航和回到顶部按钮功能
            const backToTop = document.querySelector('.back-to-top');
            const navLinks = document.querySelectorAll('.page-navigator a');
            const sections = document.querySelectorAll('section[id]');
            
            document.querySelector('.hero-section').id = 'hero';
            
            // 回到顶部按钮显示/隐藏
            window.addEventListener('scroll', function() {
                if (window.scrollY > 300) {
                    backToTop.classList.add('visible');
                } else {
                    backToTop.classList.remove('visible');
                }
                
                // 高亮当前区域锚点
                let current = '';
                sections.forEach(section => {
                    const sectionTop = section.offsetTop;
                    const sectionHeight = section.offsetHeight;
                    if (scrollY >= (sectionTop - 200)) {
                        current = section.getAttribute('id');
                    }
                });
                
                navLinks.forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('href') === '#' + current) {
                        link.classList.add('active');
                    }
                });
            });
            
            // 回到顶部按钮点击事件
            backToTop.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
            
            // 平滑滚动到锚点
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        window.scrollTo({
                            top: targetElement.offsetTop - 70, // 减去导航栏高度
                            behavior: 'smooth'
                        });
                    }
                });
            });
        });
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js" integrity="sha512-Tn2m0TIpgVyTzzvmxLNuqbSJH3JP8jm+Cy3hvHrW7ndTDcJ1w5mBiksqDBb8GpE2ksktFvDB/ykZ0mDpsZj20w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <!-- 添加额外的互动动画 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 在原有的初始化代码之后添加这些新功能
            // ... existing code ...
            
            // 音符爆炸效果
            function createNoteExplosion(x, y) {
                const colors = ['#1DB954', '#4D2C91', '#8466CC', '#1ED760', '#6c44c4'];
                const symbols = ['♪', '♫', '♬', '♩', '♪♪'];
                const container = document.createElement('div');
                container.style.cssText = `
                    position: fixed;
                    left: ${x}px;
                    top: ${y}px;
                    z-index: 2000;
                    pointer-events: none;
                `;
                document.body.appendChild(container);
                
                // 创建15个随机音符(增加数量)
                for (let i = 0; i < 15; i++) {
                    const note = document.createElement('div');
                    const symbol = symbols[Math.floor(Math.random() * symbols.length)];
                    const color = colors[Math.floor(Math.random() * colors.length)];
                    const size = Math.random() * 20 + 10;
                    const angle = Math.random() * 360;
                    const distance = Math.random() * 100 + 50;
                    
                    note.textContent = symbol;
                    note.style.cssText = `
                        position: absolute;
                        left: 0;
                        top: 0;
                        color: ${color};
                        font-size: ${size}px;
                        font-weight: bold;
                        transform: translate(-50%, -50%);
                        opacity: 1;
                        transition: all 1s ease-out;
                        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
                    `;
                    
                    container.appendChild(note);
                    
                    // 触发动画
                    setTimeout(() => {
                        const radians = angle * Math.PI / 180;
                        const endX = distance * Math.cos(radians);
                        const endY = distance * Math.sin(radians);
                        note.style.transform = `translate(calc(-50% + ${endX}px), calc(-50% + ${endY}px)) rotate(${angle}deg)`;
                        note.style.opacity = '0';
                    }, 10);
                }
                
                // 移除容器
                setTimeout(() => {
                    document.body.removeChild(container);
                }, 1500);
            }
            
            // 触发区域检测 - 修改为默认始终返回true，使点击特效在整个页面都能触发
            function isInViewport(element) {
                // 直接返回true，让所有区域都能触发特效
                return true;
                
                // 原代码保留作为注释，以便需要时恢复
                /*
                const rect = element.getBoundingClientRect();
                return (
                    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
                    rect.bottom >= 0
                );
                */
            }
            
            // 添加点击触发效果 - 简化判断条件，确保在任意位置点击都能触发
            document.addEventListener('click', function(e) {
                // 不再检查特定区域，全页面启用点击特效
                createNoteExplosion(e.clientX, e.clientY);
            });
            
            // 为播放按钮添加点击波纹效果
            const ctaButtons = document.querySelectorAll('.btn-cta-primary, .btn-pricing, .btn-final-cta, .btn-more-videos');
            
            ctaButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    const rect = button.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    
                    const ripple = document.createElement('span');
                    ripple.className = 'ripple';
                    ripple.style.cssText = `
                        position: absolute;
                        top: ${y}px;
                        left: ${x}px;
                        transform: translate(-50%, -50%);
                        width: 0;
                        height: 0;
                        border-radius: 50%;
                        background: rgba(255, 255, 255, 0.4);
                        z-index: 0;
                    `;
                    
                    button.appendChild(ripple);
                    
                    setTimeout(() => {
                        ripple.style.width = '300px';
                        ripple.style.height = '300px';
                        ripple.style.opacity = '0';
                    }, 10);
                    
                    setTimeout(() => {
                        button.removeChild(ripple);
                    }, 600);
                });
            });
        });
    </script>
</body>
</html> 